<template>
  <div class="main">
    <Header></Header>
    <el-carousel height="450px">
      <el-carousel-item v-for="(item, index) in topImg" :key="index">
        <img :src="item.url" style="width: 100%; height: 100%" alt="" />
        <div class="cover">
          {{ item.title }}<br />
          <span style="font-size: 35px">{{ item.subTitle }}</span>
        </div>
      </el-carousel-item>
    </el-carousel>

    <div class="body">
      <div class="body-show">
        <p>
          当前已经为广大用户完成
          <span class="userNum">{{ userNum }}</span> 张地图处理
        </p>
      </div>
      <el-row class="button-row">
        <el-button type="primary" @click="gotoIndex">免费使用</el-button>
      </el-row>
      <el-divider />
    </div>
  </div>
</template>

<style src="../assets/css/Home.css" scoped >
</style>

<script>
import Header from "../components/Header.vue";
export default {
  components: {
    Header,
  },
  data() {
    return {
      userNum: 1000,
      topImg: [
        {
          title: "免费地图生成系统",
          subTitle: "Free Map-Generation System",
          url: "https://img-1304418829.cos.ap-beijing.myqcloud.com/6.jpg",
        },
        {
          title: "大数据集计算与可视化",
          subTitle: "Big data calculation and visualization",
          url: "https://img-1304418829.cos.ap-beijing.myqcloud.com/joshua-mayo-HASoyURgPMY-unsplash.jpg",
        },
        {
          title: "多样化的计算工具",
          subTitle: "Diversified calculation tools",
          url: "https://img-1304418829.cos.ap-beijing.myqcloud.com/internet-banner.jpg",
        },
      ],
      topImg2: [
        {
          title: "学生",
          subTitle: "线上考试 限时截止 实时出分",
          url: "sign-in-3",
        },
        {
          title: "企业管理者",
          subTitle: "海量模板 图表多样 关联性题目 交叉分析",
          url: "sign-in-5",
        },
        {
          title: "防疫志愿者",
          subTitle: "轻松打卡 特色表单 一键获取地理位置",
          url: "sign-in-7",
        },
      ],
    };
  },
  methods: {
    gotoLogin() {
      this.$router.push("/login");
    },
    gotoIndex() {
      this.$router.push("/index");
    },
  },
};
</script>

